<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <son1
            :msg1="age"
            :msg2="person"
            :msg3="arr1"
            :msg4="info4"
            msg5="Janpenese"
            :msg6="arr6"
        ></son1>
    </div>
    <template id="son1">
        <div>
            <p>age:{{msg1}}</p>
            <p>{{msg2.job}}</p>
            <p>{{msg3[1]}}</p>
            <p>{{msg4}}</p>
            <p>{{msg5}}</p>
            <p>{{msg6}}</p>
        </div>
    </template>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                age: '18',
                person: {name: 'Tom', job: 'stu'},
                arr1: [1,2,3,4],
                info4: 'hello',
                arr6: [1,2,3,4,5]
            },
            components: {
                son1: {
                    template: '#son1',
                    props: {
                        msg1: [Number, String],
                        msg2: Object,
                        msg3: {
                            type: Array
                        },
                        // 校验是否必填
                        msg4: {
                            required: true
                        },
                        // 设置默认值，如果没有传值就用默认值，如果传值了就以传的值为准
                        msg5: {
                            default: '中国'
                        },
                        // 自定义校验函数，可以定制校验的规则
                        msg6: {
                            validator(val) {
                                // 判断！！！
                                return val.length == 6
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>